<template>
  <el-dialog :close-on-click-modal="false" title="岗位管理" width="800px" :visible.sync="visible">
    <e-table
      class="data-table"
      :pageObj="null"
      :tableData="tableData"
      :columns="columns"
      :loading="loading"
    >
      <el-table-column label="是否管理岗" slot="isCharge" align="center" width="100">
        <template slot-scope="scope">
          <el-checkbox
            :value="scope.row.managerPost === 1"
            @change="e => radioChange(e,scope.row)"
          />
          <!-- <span>{{ scope.row.chargePost === 1 ? '是' : '否' }}</span> -->
        </template>
      </el-table-column>
      <el-table-column label="上级管理岗" slot="parentPosition" align="center">
        <template slot-scope="scope">
          <p class="mb0" v-show="!scope.row.showTree">
            <span>
              {{ scope.row.parentPositionName + '-' + scope.row.parentPositionDeptName }}
              <i
                style="cursor: pointer"
                @click="handleSearchClick(scope.row)"
                class="el-icon-search"
              />
            </span>
          </p>
          <p class="mb0" v-if="scope.row.showTree">
            <dept-position-s
              @select="e => handlePositionSelect(e, scope.row)"
              ref="deptPositionS"
              :selectStyle="{ width: '300px',float: 'left' }"
            />
            <el-button size="mini" @click="handleSure(scope.row)">确定</el-button>
          </p>
        </template>
      </el-table-column>
    </e-table>
    <div slot="footer">
      <el-button type="primary" @click="visible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { queryPositionByDeptId, updateSysDeptPosition, updateManagerPost } from '@/api/department'
import DeptPositionS from '@/components/DeptPositionS'

export default {
  components: {
    DeptPositionS
  },
  data() {
    return {
      name: null,
      loading: false,
      visible: false,
      columns: [
        {
          width: '120px',
          label: '岗位名称',
          prop: 'positionName'
        },
        { slot: 'isCharge' },
        { slot: 'parentPosition' }
      ],
      tableData: [],
      confirmLoading: false,
      mdl: {}
    }
  },
  methods: {
    async radioChange(e, row) {
      const { deptId, positionId } = row
      const state = e ? 1 : 0
      const index = this.tableData.findIndex(v => v.positionId === row.positionId)
      if (e) {
        this.$set(this.tableData[index], 'managerPost', 1)
      } else {
        this.$set(this.tableData[index], 'managerPost', 0)
      }
      const res = await updateManagerPost({ deptId, positionId, state })
      console.log('res', res)
    },
    async set(record) {
      console.log('record', record)
      this.mdl = Object.assign({}, record)
      this.getPosition({ deptId: record.deptId })
      this.visible = true
    },
    async getPosition(param = { deptId: '' }) {
      const res = await queryPositionByDeptId(param)
      if (res.data && res.data.length > 0) {
        const { state, data } = res
        data.map(v => {
          v.showTree = false
        })
        this.tableData = data
      } else {
        this.tableData = []
      }
    },
    handlePositionSelect(value, row) {
      const positionId = value.id.split('-')[1]
      const deptId = value.id.split('-')[0]
      const index = this.tableData.findIndex(v => v.positionId === row.positionId)
      console.log('position value', value, row, index)

      this.$nextTick(() => {
        this.$set(this.tableData[index], 'parentPosition', positionId)
        this.$set(this.tableData[index], 'parentPositionDept', deptId)
        this.$set(this.tableData[index], 'parentPositionName', value.title)
      })
      console.log('tableData', this.tableData)
    },
    handleSearchClick(row) {
      const index = this.tableData.findIndex(v => v.positionId === row.positionId)
      this.$set(this.tableData[index], 'showTree', true)
    },
    async handleSure(row) {
      const index = this.tableData.findIndex(v => v.positionId === row.positionId)
      console.log('row', row)
      this.$nextTick(() => {
        this.$set(this.tableData[index], 'parentPositionName', row.parentPositionName)
      })
      const res = await updateSysDeptPosition(row)
      if (res.state === '000000') {
        this.$message.success('修改上级管理岗成功')
        this.$set(this.tableData[index], 'showTree', false)
        this.getPosition({ deptId: this.mdl.deptId })
      }
    }
  }
}
</script>

<style scoped>
.data-table >>> .cell,
.data-table >>> .el-table,
.data-table >>> .el-table__body-wrapper {
  overflow: inherit;
}

.data-table >>> .el-table .el-table__row .el-radio__label {
  display: none;
}
</style>
